<template>
  <div class="edit-form edit-dialog">
    <el-form
      ref="ruleFormRef"
      v-loading="loading"
      :model="form"
    >
      <el-descriptions
        :column="2"
        border
        :colon="true"
        label-class-name="custom-description-label-160"
      >
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            菜单名称
          </template>
          <el-form-item
            label-width="80px"
            prop="formData.name"
            :rules="$formRules.resourceName"
          >
            <el-input
              v-model="form.formData.name"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            菜单代码
          </template>
          <el-form-item
            label-width="80px"
            prop="formData.code"
            :rules="$formRules.resourceCode"
          >
            <el-input
              v-model="form.formData.code"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            菜单类型
          </template>
          <el-form-item
            label-width="80px"
            prop="formData.type"
            :rules="$formRules.resourceType"
          >
            <el-select
              v-model="form.formData.type"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            菜单路径
          </template>
          <el-form-item
            label-width="80px"
            prop="formData.jump"
            :rules="$formRules.resourcePath"
          >
            <el-input
              v-model="form.formData.jump"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <span class="colorRed">*</span>
            排序
          </template>
          <el-form-item
            label-width="80px"
            prop="formData.sort"
            :rules="$formRules.resourceSort"
          >
            <el-input
              v-model.number="form.formData.sort"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>上级菜单</template>
          <el-form-item label-width="80px">
            <el-input
              v-model="form.formData.parentName"
              autocomplete="off"
              :readonly="true"
              placeholder="请输入"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>是否显示</template>
          <el-form-item label-width="80px">
            <el-select
              v-model="form.formData.isDisplayInMainMenu"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in displayMainMenuOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>图标</template>
          <el-form-item label-width="80px">
            <el-input
              v-model="form.formData.icon"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>重定向</template>
          <el-form-item label-width="80px">
            <el-input
              v-model="form.formData.redirect"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>备注</template>
          <el-form-item label-width="80px">
            <el-input
              v-model="form.formData.remark"
              autocomplete="off"
              placeholder="请输入"
            />
          </el-form-item>
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <div class="btn-group">
      <el-button class="btn-form-close" @click="cancel">取消</el-button>
      <el-button
        :loading="btnLoading"
        v-prevent-repeat-click
        class="btn-form-save"
        type="primary"
        @click="submit(ruleFormRef)"
      >
        保存
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { getMenusResource, updateResource, insertResource } from '@/api/system'
import { ref, reactive, toRefs, onMounted, watch } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus
} from '@element-plus/icons-vue'
const props = defineProps({
  defaultForm: {
    type: Object
  },
  editType: {
    type: String,
    default: ''
  }
})

let form = reactive({
  formData: {
    pid: '',
    id: '',
    parentName: ''
  }
})
let loading = ref(false)
let btnLoading = ref(false)
const ruleFormRef = ref()
const typeOptions = reactive([
  {
    value: 1,
    label: '目录'
  },
  {
    value: 2,
    label: '页面'
  },
  {
    value: 3,
    label: '按钮'
  }
])
const displayMainMenuOptions = reactive([
  {
    value: 0,
    label: '不显示'
  },
  {
    value: 1,
    label: '显示'
  }
])
const emit = defineEmits(['cancel', 'success'])

const getResource = id => {
  loading.value = true
  getMenusResource(id).then(res => {
    if (res.succeed) {
      loading.value = false
      form.formData = res.data
      form.formData.id = id
    }
  })
}

// watch([props.defaultForm,props.editType], (newValue,oldValue) => {
//   if (props.editType === 'add') {
//     form.pid = props.defaultForm.pid
//     form.parentName = props.defaultForm.parentName
//   } else {
//     form.id = props.defaultForm.id
//     getResource(form.id)
//   }
// }, {
//   deep: true,
//   immediate: true
// })

onMounted(() => {
  if (props.editType === 'add') {
    form.formData.pid = props.defaultForm.pid
    form.formData.parentName = props.defaultForm.parentName
  } else {
    form.formData.id = props.defaultForm.id
    getResource(form.formData.id)
  }
})

const submit = async formEl => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      btnLoading.value = true
      if (props.editType === 'add') {
        add()
      } else {
        edit()
      }
    }
  })
}

const edit = () => {
  updateResource(form.formData).then(res => {
    if (res.succeed) {
      emit('success')
    }
    btnLoading.value = false
  })
}
const add = () => {
  insertResource(form.formData).then(res => {
    if (res.succeed) {
      emit('success')
    }
    btnLoading.value = false
  })
}
const cancel = () => {
  emit('cancel')
}
</script>
